<template>
  <view class="env-data">
    <view class="chart-title flex items-center">
      <image
        src="/static/images/index-env.png"
        class="index-device-tj-img"
      />环境数据
    </view>
    <view class="flex items-center env-header">
      <view class="env-header-left">
        <view class="env-tq-name">
          {{ today.text }}
        </view>
        <view class="env-wd-qj">
          {{ today.temperature }} <text class="wd-dw">℃</text>
        </view>
      </view>
      <view class="env-header-right">
        <view class="env-kq flex">
          <text>空气质量：</text><text class="env-kq-num">{{ today.aqi }}</text>
          <text class="kq-zl">优</text>
        </view>
        <view class="env-sd flex">
          <text>室外湿度：</text
          ><text class="env-kq-num">{{ today.humidity }}</text>
          <text class="percent-dw">%</text>
        </view>
      </view>
    </view>
    <view class="flex env-item-line">
      <view class="env-item">
        <view class="env-item-name">
          温度
        </view>
        <view class="env-item-down">
          <image src="/static/images/index-env-wd.png" class="env-item-img">
          </image>
          <text class="env-item-num">{{ today.temperature }}</text>
          <text class="env-item-dw">℃</text>
        </view>
      </view>
      <view class="env-item">
        <view class="env-item-name">
          湿度
        </view>
        <view class="env-item-down">
          <image src="/static/images/index-env-sd.png" class="env-item-img" />
          <text class="env-item-num">{{ today.humidity }}</text>
          <text class="env-item-dw">%</text>
        </view>
      </view>
      <view class="env-item">
        <view class="env-item-name">
          PM2.5
        </view>
        <view class="env-item-down">
          <image
            src="/static/images/index-env-pm.png"
            class="env-item-img"
          /><text class="env-item-num">{{ today.pm25 }}</text>
          <text class="env-item-dw">g/m³</text>
        </view>
      </view>
    </view>
    <view class="flex env-item-line">
      <view class="env-item">
        <view class="env-item-name">
          CO2
        </view>
        <view class="env-item-down">
          <image
            src="/static/images/index-env-co.png"
            class="env-item-img"
          ></image>
          <text class="env-item-num">{{ today.no2 }}</text>
          <text class="env-item-dw">ppm</text>
        </view>
      </view>
      <view class="env-item">
        <view class="env-item-name">
          TVOC
        </view>
        <view class="env-item-down">
          <image
            src="/static/images/index-env-tvoc.png"
            class="env-item-img"
          /><text class="env-item-num">{{ today.pm10 }}</text>
          <text class="env-item-dw">mg</text>
        </view>
      </view>
      <view class="env-item">
        <view class="env-item-name">
          甲醛
        </view>
        <view class="env-item-down">
          <image
            src="/static/images/index-env-jq.png"
            class="env-item-img"
          /><text class="env-item-num">-</text>
          <text class="env-item-dw">ppm</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  created() {},
  mounted() {
    // this.$request('/api/role/list')
    this.$store.dispatch('weather/today')
  },
  computed: {
    ...mapGetters({
      today: 'weather/today',
    }),
    // ...mapState({
    //   currentProject: (state) => state.project.project,
    // }),
  },
  methods: {},
  // watch: {
  //   currentProject: function(val) {
  //     if (val.id) {
  //       this.$store.dispatch('weather/today')
  //       this.$store.dispatch('project/fetchTodayWaterAndPower', val.id)
  //     }
  //   },
  // },
}
</script>
<style lang="scss" scoped>
.env-data {
  position: relative;
  margin-top: 22rpx;
  margin-bottom: 22rpx;
  padding: 24rpx;
  background-color: #ffffff;
  box-shadow: 0px 3px 14px rgba(209, 209, 209, 0.16);
  .chart-title {
    font-size: 32rpx;
    font-weight: bold;
    .index-device-tj-img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }
  }
  .env-header {
    justify-content: center;
    padding-top: 16rpx;
    .env-header-left {
      text-align: center;
      .env-tq-name {
        color: #383c48;
      }
      .env-wd-qj {
        margin-top: 30rpx;
        color: #383c48;
        font-size: 60rpx;
        font-weight: bold;
        // line-height: 84rpx;
        .wd-dw {
          font-size: 24rpx;
          font-weight: 400;
        }
      }
    }
    .env-header-right {
      margin-left: 60rpx;
      .env-kq-num {
        font-size: 28rpx;
      }
      .percent-dw {
        margin-left: 2rpx;
        color: $uni-text-color-grey;
      }
      .kq-zl {
        margin-left: 40rpx;
        width: 54rpx;
        text-align: center;
        line-height: 30rpx;
        background: rgba(0, 219, 144, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-weight: 500;
        color: #fff;
      }
      .env-kq {
        color: #383c48;
        font-size: 24rpx;
        align-items: start;
      }
      .env-sd {
        color: #383c48;
        font-size: 24rpx;
        margin-top: 24rpx;
        align-items: start;
      }
    }
  }
  .env-item-line {
    justify-content: space-between;
    .env-item {
      min-width: 150rpx;
      margin-top: 49rpx;
      .env-item-name {
        color: #adb5c9;
        font-size: 24rpx;
        line-height: 33rpx;
      }
      .env-item-down {
        margin-top: 12rpx;
        display: flex;
        align-items: center;
        .env-item-img {
          width: 36rpx;
          height: 36rpx;
        }
        .env-item-num {
          margin-left: 14rpx;
          color: #282a33;
          font-size: 30rpx;
          font-weight: bold;
        }
        .env-item-dw {
          margin-left: 4rpx;
          font-size: 20rpx;
          color: $uni-text-color-grey;
        }
      }
    }
  }
}
</style>
